<template>
  <div class="app-container">
    <el-tabs ref="tabs" v-model="activeName">
      <el-tab-pane name="first">

        <el-form :model="queryParams" ref="assessListForm" size="small" :inline="true"
                 label-width="68px">
          <el-form-item prop="assessName">
            <el-input
              v-model="queryParams.assessName"
              placeholder="方案名称"
              clearable
              @keyup.enter.native="handleQuery"
              style="width: 150px"
            />
          </el-form-item>
          <input type="text" style="display: none;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" type="warning" @click="resetQuery">重置</el-button>
          </el-form-item>

        </el-form>
        <el-tabs @tab-click="getList" v-model="queryParams.status" type="border-card">
          <el-tab-pane name="0" label="待处理">
            <el-table :data="assessList" style="width: 100%">
              <el-table-column prop="assessName" align="center" label="方案名称"></el-table-column>
              <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
              <el-table-column prop="assessDeadline" align="center" label="截至时间"></el-table-column>
              <el-table-column prop="status" align="center" label="处理状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                  <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="secondEmpClick(scope.row)">查看考核人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList()"
            />
          </el-tab-pane>
          <el-tab-pane name="1" label="已处理">
            <el-table :data="assessList" style="width: 100%">
              <el-table-column prop="assessName" align="center" label="方案名称"></el-table-column>
              <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
              <el-table-column prop="assessDeadline" align="center" label="截至时间"></el-table-column>
              <el-table-column prop="status" align="center" label="处理状态">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                  <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="secondEmpClick(scope.row)">查看考核人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList()"
            />
          </el-tab-pane>
        </el-tabs>

      </el-tab-pane>
      <el-tab-pane name="second">
        <el-button style="float: left;margin-right: 30px" @click="goFirstBack()">返回</el-button>
        <el-form :model="empQuery" ref="assessEmpForm" size="small" :inline="true"
                 label-width="68px">
          <el-form-item prop="nickName">
            <el-input
              v-model="empQuery.nickName"
              placeholder="员工姓名/工号"
              clearable
              @keyup.enter.native="handleEmpQuery"
              style="width: 150px"
            />
          </el-form-item>
          <input type="text" style="display: none;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleEmpQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" type="warning" @click="resetEmpQuery">重置</el-button>
          </el-form-item>

          <el-tabs @tab-click="getCal" v-model="empQuery.status" type="border-card">
            <el-tab-pane name="0" label="待处理">
              <el-table :data="assessEmpList" style="width: 100%">
                <el-table-column prop="nickName" align="center" label="员工姓名"></el-table-column>
                <el-table-column prop="assessName" align="center" label="方案名称"></el-table-column>
                <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
                <el-table-column prop="assessDeadline" align="center" label="截至时间"></el-table-column>
                <el-table-column prop="status" align="center" label="处理状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                    <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                    <el-tag v-if="scope.row.status === '2'" type="warning">已驳回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="thirdEmpClick(scope.row)">处理</el-button>
                    <el-button size="mini" type="text" @click="empInfoFlow(scope.row.aid,scope.row.uid)">查看考核流程
                    </el-button>
                    <el-button size="mini" type="text" @click="changeCause(scope.row)">原因</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="empTotal>0"
                :total="empTotal"
                :page.sync="empQuery.pageNum"
                :limit.sync="empQuery.pageSize"
                @pagination="getCal()"
              />
            </el-tab-pane>
            <el-tab-pane name="1" label="已处理">
              <el-table :data="assessEmpList" style="width: 100%">
                <el-table-column prop="nickName" align="center" label="员工姓名"></el-table-column>
                <el-table-column prop="assessName" align="center" label="方案名称"></el-table-column>
                <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
                <el-table-column prop="assessDeadline" align="center" label="截至时间"></el-table-column>
                <el-table-column prop="status" align="center" label="处理状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                    <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                    <el-tag v-if="scope.row.status === '2'" type="warning">已驳回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="empInfoFlow(scope.row.aid,scope.row.uid)">查看考核流程
                    </el-button>
                    <el-button size="mini" type="text" @click="changeCause(scope.row)">原因</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="empTotal>0"
                :total="empTotal"
                :page.sync="empQuery.pageNum"
                :limit.sync="empQuery.pageSize"
                @pagination="getCal()"
              />
            </el-tab-pane>
            <el-tab-pane name="2" label="已驳回">
              <el-table :data="assessEmpList" style="width: 100%">
                <el-table-column prop="nickName" align="center" label="员工姓名"></el-table-column>
                <el-table-column prop="assessName" align="center" label="方案名称"></el-table-column>
                <el-table-column prop="assessPeriod" align="center" label="考核周期"></el-table-column>
                <el-table-column prop="assessDeadline" align="center" label="截至时间"></el-table-column>
                <el-table-column prop="status" align="center" label="处理状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === '0'" type="info">待处理</el-tag>
                    <el-tag v-if="scope.row.status === '1'" type="success">已处理</el-tag>
                    <el-tag v-if="scope.row.status === '2'" type="warning">已驳回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="thirdEmpClick(scope.row)">处理</el-button>
                    <el-button size="mini" type="text" @click="empInfoFlow(scope.row.aid,scope.row.uid)">查看考核流程
                    </el-button>
                    <el-button size="mini" type="text" @click="changeCause(scope.row)">原因</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="empTotal>0"
                :total="empTotal"
                :page.sync="empQuery.pageNum"
                :limit.sync="empQuery.pageSize"
                @pagination="getCal()"
              />
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="third">
        <div v-if="assessEmpInfoList.length > 0">
          <el-button style="float: left;margin-right: 30px" @click="goSecondBack()">返回</el-button>
          <div style="margin-left: 100px">
            <h1>考核详情</h1>
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix" style="text-align: center">
              <center>
                <el-descriptions :colon="false" style="float: left" :column="5">
                  <el-descriptions-item label="姓名">
                    {{ assessEmpInfoList[0].empName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="工号">
                    {{ assessEmpInfoList[0].jobNo }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核周期">
                    {{ assessEmpInfoList[0].assessPeriod }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核方案">
                    {{ assessEmpInfoList[0].assessTemName }}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <el-button style="float: right; padding: 3px 0"
                               @click="empInfoFlow(assessEmpInfoList[0].aid,assessEmpInfoList[0].uid)" type="text">
                      查看考核流程
                    </el-button>
                  </el-descriptions-item>
                  <el-descriptions-item label="部门">
                    {{ assessEmpInfoList[0].deptName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="岗位">
                    {{ assessEmpInfoList[0].stationName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核名称">
                    {{ assessEmpInfoList[0].assessName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="考核结束时间">
                    {{
                      parseTime(assessEmpInfoList[0].assessDeadline, '{y}-{m}-{d}')
                    }}
                  </el-descriptions-item>
                </el-descriptions>
              </center>
            </div>
            <el-table
              border
              :data="assessEmpInfoList"
              style="width: 100%">
              <el-table-column align="center" prop="targetLabel" label="指标名称"></el-table-column>
              <el-table-column align="center" prop="weight" label="指标权重">
                <template slot-scope="scope">{{ scope.row.weight + ' %' }}</template>
              </el-table-column>
              <el-table-column align="center" prop="scoreCeiling" label="评分上限"></el-table-column>
              <el-table-column align="center" prop="assessCriterion" label="考核标准"></el-table-column>
              <el-table-column align="center" prop="nickName" label="评分人"></el-table-column>
              <el-table-column align="center" prop="score" label="评分">
                <template slot-scope="scope">
                  <span v-if="scope.row.score !== null">{{ scope.row.score }}</span>
                  <span v-if="scope.row.score === null">未评分</span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="calculate" label="得分">
                <template slot-scope="scope">
                    <span v-if="scope.row.score !== null">{{
                        (scope.row.score / scope.row.scoreCeiling) * 10 * (scope.row.weight / 100)
                      }}</span>
                  <span v-if="scope.row.score === null">未评分</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <div style="text-align: center;margin-top: 40px">
            <el-button @click="getNoPass">不通过</el-button>
            <el-button type="primary" @click="pass">通过</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-dialog
        title="不通过原因"
        :visible.sync="passVisible"
        width="40%"
        :before-close="handleClose">
        <el-dialog
          width="30%"
          title="选择考核流程节点"
          :visible.sync="flowVisible"
          append-to-body>
          <el-table ref="multipleTable" :data="flowList" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" :selectable="selectable" width="55"></el-table-column>
            <el-table-column align="center" label="考核流程" prop="assessFlow"></el-table-column>
            <el-table-column align="center" label="考核人" prop="nickName"></el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
              <el-button @click="flowVisible = false">取 消</el-button>
              <el-button type="primary" @click="onFlow">确 定</el-button>
          </span>
        </el-dialog>

        <el-form label-position="left" ref="passForm" :rules="passRules" label-width="140px" :model="passCause">
          <el-form-item prop="fids" label="选择打回考核流程">
            <el-button @click="selectFlow">选择流程</el-button>&nbsp;&nbsp;已选（{{ passCause.flows.length }}）
          </el-form-item>
          <div style="margin-left: 50px;margin-bottom: 30px" v-for="(pass,index) in passCause.flows">
            {{ index + 1 }}&nbsp;&nbsp; <span>{{ pass.nickName }}</span>&nbsp;&nbsp;&nbsp;
            <span>{{ pass.assessFlow }}</span>
            <br>
          </div>
          <el-form-item prop="descInfo" label="原因">
            <el-input type="textarea" v-model="passCause.descInfo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="passVisible = false">取 消</el-button>
          <el-button type="primary" @click="noPass">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="考核流程" :visible.sync="centerDialogVisible" width="40%" center>
        <div style="height: 300px;">
          <el-steps direction="vertical" finish-status="success" :active="active">
            <el-step :title="createData.createBy +' ' +'发起考核'"
                     :description="
                     parseTime(createData.createTime, '{y}-{m}-{d}')"
            ></el-step>
            <el-step :title="activity.nickName +'  '+ activity.assessFlow"
                     :description="
                     parseTime(activity.updateTime, '{y}-{m}-{d}')"
                     v-for="(activity, index) in activities">
            </el-step>
          </el-steps>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
          </span>
      </el-dialog>
      <el-dialog
        title="驳回原因"
        :visible.sync="causeVisible"
        width="30%">
        <span>{{ cause }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="causeVisible = false">关闭</el-button>
         </span>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>

  import {
    getCalculateList, getCalculateEmp, updateCheckStatus,
    selectFlowByAid,
    updateFlow,
    getCauseByEid
  } from '@/api/system/record'
  import {
    getEmpInfoFlow,
    getAssessEmpInfo
  } from '@/api/system/assessInfo'
  import Template from "@/views/system/email/ItoTemplate";

  export default {
    name: "calculate",
    components: {Template},
    data() {
      return {
        activeName: 'first',
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          assessName: '',
          status: 0
        },
        passCause: {
          fids: [],
          descInfo: '',
          uid: undefined,
          flows: []
        },
        passVisible: false,
        empQuery: {
          pageNum: 1,
          pageSize: 10,
          nickName: '',
          status: 0
        },
        assessList: [],
        assessEmpList: [],
        assessEmpInfoList: [],
        activities: [],
        active: 1,
        total: 0,
        empTotal: 0,
        loading: false,
        centerDialogVisible: false,
        flowVisible: false,
        createData: {
          createTime: null,
          createBy: null
        },
        checkEmp: {},
        multipleSelection: [],
        flowList: [],
        passRules: {
          fids: [
            {required: true, message: '请选择驳回流程', trigger: 'change', type: 'array'}
          ],
          descInfo: [
            {required: true, message: '驳回原因不能为空', trigger: 'blur'}
          ]
        },
        cause: '',
        causeVisible: false
      }
    },
    created() {
      this.getList()
    },
    methods: {
      changeCause(row) {
        getCauseByEid(row.eid).then(res => {
          this.cause = res.msg
          this.causeVisible = true
        })
      },
      onFlow() {
        this.passCause.uid = this.checkEmp.uid
        this.passCause.flows = this.multipleSelection
        this.passCause.flows.map(m => {
          this.passCause.fids.push(m.id)
        })
        console.log(this.passCause.fids)
        this.flowVisible = false
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      selectable(row, index) {
        if (row.status !== '1') {
          return true
        }
      },
      selectFlow() {
        selectFlowByAid(this.empQuery.id).then(res => {
          this.flowList = res.data
          this.flowVisible = true
        })
      },
      handleClose() {
        this.passVisible = false
      },
      getNoPass() {
        this.passVisible = true
      },
      noPass() {
        this.$refs["passForm"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认将该用户驳回', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              console.log(this.passCause)
              updateFlow(this.passCause).then(res => {
                updateCheckStatus(this.checkEmp.aid, this.checkEmp.uid, "2").then(res => {
                  this.$message({
                    type: 'success',
                    message: '已驳回!'
                  });
                  this.goSecondBack()
                  this.handleClose()
                  this.passCause = {
                    fids: [],
                    descInfo: '',
                    uid: undefined,
                    flows: []
                  }
                })
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });
            });
          }
        })
      },
      pass() {
        updateCheckStatus(this.checkEmp.aid, this.checkEmp.uid, "1").then(res => {
          this.goSecondBack()
        })
      },
      getList() {
        getCalculateList(this.queryParams).then(res => {
          this.assessList = res.rows
          this.total = res.total
        })
      },
      handleQuery() {
        this.getList()
      },
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        }
        this.getList()
      },
      secondEmpClick(row) {
        this.empQuery.id = row.id
        getCalculateEmp(this.empQuery).then(res => {
          this.assessEmpList = res.rows
          this.empTotal = res.total
          this.activeName = 'second'
        })
      },
      getCal() {
        getCalculateEmp(this.empQuery).then(res => {
          this.assessEmpList = res.rows
          this.empTotal = res.total
        })
      },
      empInfoFlow(aid, uid) {
        this.centerDialogVisible = true
        getEmpInfoFlow(aid, uid).then(res => {
          this.createData.createTime = res.data[0].createTime
          this.createData.createBy = res.data[0].createBy
          this.activities = res.data
          res.data.map(r => {
            if (res.data[0].status === '0') {
              this.active = 1
              return;
            } else if (r.status === '1') {
              this.active = r.sequence + 1
            }
          })
        })
      },
      handleEmpQuery() {
        this.getCal()
      },
      resetEmpQuery() {
        this.empQuery.nickName = ''
        this.getCal()
      },
      goFirstBack() {
        this.activeName = "first"
      },
      goSecondBack() {
        this.activeName = 'second'
        this.getCal()
      },
      thirdEmpClick(row) {
        this.checkEmp = row
        this.activeName = 'third'
        getAssessEmpInfo(row.aid, row.uid).then(res => {
          this.assessEmpInfoList = res.data
        })
      }
    },
    mounted() {
      //tab标签的权限控制
      this.$nextTick(() => {
        //首先把所有的都隐藏
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[2].style.display = 'none';
      });
    }
  }
</script>

<style scoped>

</style>
